.base {
  /* The arrow should be 8px tall. A square element is rotated to achieve a triangular shape. Using Pythagoras' theorem, we can calculate the ratio between the triangle height and the square sides: √(8^2 + 8^2) / 8 ≈ 1.414 */
  --tooltip-arrow-size: calc(var(--cui-spacings-byte) * 1.414);

  z-index: var(--cui-z-index-tooltip);
  width: max-content;
  max-width: 360px;

  /* biome-ignore lint/suspicious/noDuplicateProperties: Browser compatibility */
  max-width: min(360px, 100vw);
  padding: 0;
  margin: 0;
  overflow: visible;
  border-radius: var(--cui-border-radius-byte);
}

.base::after {
  display: none;
}

@media (max-width: 479px) {
  .base {
    width: 100%;
    max-width: 100%;
  }
}

.content {
  padding: var(--cui-spacings-mega);
  color: var(--cui-fg-normal);
  outline: 0;
  background-color: var(--cui-bg-elevated);
  border: var(--cui-border-width-kilo) solid var(--cui-border-subtle);
  border-radius: var(--cui-border-radius-byte);
  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 8%);
}

@media (max-width: 479px) {
  .base {
    top: unset;
  }

  .content {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.headline {
  padding-right: var(--cui-spacings-peta);
  margin-bottom: var(--cui-spacings-bit);
}

.body {
  padding-right: var(--cui-spacings-peta);
}

.action {
  margin-top: var(--cui-spacings-kilo);
}

.close {
  position: absolute;
  top: var(--cui-spacings-mega);
  right: var(--cui-spacings-mega);
}

.arrow {
  position: absolute;
  width: var(--tooltip-arrow-size);
  height: var(--tooltip-arrow-size);
  background-color: var(--cui-bg-elevated);
  border-right: var(--cui-border-width-kilo) solid var(--cui-border-subtle);
  border-bottom: var(--cui-border-width-kilo) solid var(--cui-border-subtle);
  border-bottom-right-radius: 2px;
}

.base[data-side="top"] .arrow {
  top: calc(100% - (var(--tooltip-arrow-size) / 2));
  left: calc(50% - (var(--tooltip-arrow-size) / 2));
  transform: rotate(45deg);
}

.base[data-side="right"] .arrow {
  right: calc(100% - (var(--tooltip-arrow-size) / 2));
  bottom: calc(50% - (var(--tooltip-arrow-size) / 2));
  transform: rotate(135deg);
}

.base[data-side="bottom"] .arrow {
  bottom: calc(100% - (var(--tooltip-arrow-size) / 2));
  left: calc(50% - (var(--tooltip-arrow-size) / 2));
  transform: rotate(225deg);
}

.base[data-side="left"] .arrow {
  bottom: calc(50% - (var(--tooltip-arrow-size) / 2));
  left: calc(100% - (var(--tooltip-arrow-size) / 2));
  transform: rotate(315deg);
}

@media (max-width: 479px) {
  .arrow {
    display: none;
  }
}
